<template>
  <div class="biao1" ref="biao1">
    <div class="box">
      <p>高血压</p>
      <div class="mini">
        <a-popover title="高血压">
          <tiny-progress
            :percentage="value"
            color="#3dd4a7"
            :stroke-width="12"
          ></tiny-progress>
        </a-popover>
      </div>
    </div>
    <div class="box">
      <p>冠心病</p>
      <div class="mini">
        <a-popover title="冠心病">
          <tiny-progress
            :percentage="value"
            color="#3dd4a7"
            :stroke-width="12"
          ></tiny-progress>
        </a-popover>
      </div>
    </div>
    <div class="box">
      <p>高血糖</p>
      <div class="mini">
        <a-popover title="高血糖">
          <tiny-progress
            :percentage="value"
            color="#3dd4a7"
            :stroke-width="12"
          ></tiny-progress>
        </a-popover>
      </div>
    </div>
    <div class="box">
      <p>高血脂</p>
      <div class="mini">
        <a-popover title="高血脂">
          <tiny-progress
            :percentage="value"
            color="#3dd4a7"
            :stroke-width="12"
          ></tiny-progress>
        </a-popover>
      </div>
    </div>
    <div class="box">
      <p>慢病护理</p>
      <div class="mini">
        <a-popover title="慢病护理">
          <tiny-progress
            :percentage="value"
            color="#3dd4a7"
            :stroke-width="12"
          ></tiny-progress>
        </a-popover>
      </div>
    </div>
    <div class="box">
      <p>多动症</p>
      <div class="mini">
        <a-popover title="多动症">
          <tiny-progress
            :percentage="value"
            color="#3dd4a7"
            :stroke-width="12"
          ></tiny-progress>
        </a-popover>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { TinyProgress } from "@opentiny/vue";

const value = ref(60);
</script>
<style scoped lang="scss">
.biao1 {
  width: 100%;
  height: 90%;
  margin-top: 15px;
  .box {
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    p {
      width: 20%;
      text-align: right;
      font-size: 16px;
      color: #535353;
    }
    .mini {
      padding-left: 10px;
      width: 80%;
      box-sizing: border-box;
      position: relative;
      top: 7px;
    }
  }
}
</style>
